<template>
	<view class="theme-page-bg h100vh containear">
		<uni-segmented-control :current="currTab" :values="list" styleType='text' active-color="#3FA897" @clickItem="handleChangeTab"/>
		<view class="padding-20">
			<template v-show="orderList?.length > 0">
			     <view v-for="(item, index) in orderList" :key="index">
			     	<OrderItem :dataItem="item" />
			     </view>
			</template>
			<empty v-show="!orderList?.length" mode='order' :show='false'/>
		</view>
		<bottom type="accompany" :tabIndex="3"></bottom>
	</view>
</template>

<script setup lang="ts">
	import OrderItem from './components/orderItem/index.vue';
	import bottom from '@/components/footer/footer.vue';
	import { ref, getCurrentInstance } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import empty from '@/components/empty/index.vue';
	import uniSegmentedControl from '@/uni_modules/uni-segmented-control/components/uni-segmented-control/uni-segmented-control.vue';
	const { proxy } = getCurrentInstance() as any
	
	const currTab = ref(0);

	const list = ref(['待支付', '待完成', '待服务', '已完成', '已取消']);

	const orderList = ref(
		[{
			orderSn: '12345667786',
			status: '1',
			pic: 'https://img0.baidu.com/it/u=2022043590,1237511079&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500',
			name: '打针-1次3针',
			price: '38',
			content: '提供皮下及肌肉注射服务',
			totalMoney: '38',
			goodsNum: 1
		}]
	)

	function getList(e) {
		let url = proxy.$API.getOrderList
		let param = {
			page: 1,
			size: 10,
			status: e
		}
		proxy.$UNIHTTP.getData(url, param).then((res: any) => {
			orderList.value = res.data.list
			// console.log("orderList", orderList.value);
			orderList.value?.forEach((item) => {
				list.value?.forEach((i) => {
					if (item.status == i.value) {
						item.payStatus = item.status == i.value ? i.label : ''

					}
				})
			})
		})
	}

	function handleChangeTab(e) {
		getList(e.currentIndex);
	}
	onLoad(() => {
		getList(0)
	})
</script>

<style lang="scss" scoped>
	.containear {
		overflow-x: scroll;
		padding-bottom: 120rpx;
	}
</style>
